<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">当月网络流量 -- 共1024/MB</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_networkTrafficMonth"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: "networkTrafficMonth",
  data() {
    return {
      option: null,
      xAxisData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      yData1: [9, 12, 15, 18, 15, 12, 9, 12, 15, 18, 15, 12],//正常数量
    }
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_networkTrafficMonth'));
      let barWidth = '10%';
      let dataCoord = [];
      for(let i=0;i<this.xAxisData.length;i++){
        let obj1 = {};
        obj1.coord = [i, this.yData1[i]];
        dataCoord.push(obj1);
      }
     

      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {
        //   data: ['正常', '异常'],
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 14,
        //   },
        // },
        xAxis: {
          data: this.xAxisData,
          axisLabel: {
            color: '#999',
            formatter: '站点{value}'
          },
          axisTick: {
            show: false
          }, 
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(78, 241, 246, 0.3)',
            }
          },
        },
        yAxis: {
          axisLabel: {
            color: '#999'
          },
          axisTick: {
            show: false
          }, 
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(78, 241, 246, 0.3)'
            }
          },
        },
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        series: [
          {
            name: '正常',
            type: 'bar',
            stack: 'one',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 1, 
                  color: 'rgba(0, 0, 0, 0)'
                },{
                  offset: 0.5, 
                  color: 'rgba(69, 194, 198,0.3)'
                },{
                  offset: 0, 
                  color: 'rgb(78, 241, 246)'
                }])
              }
            },
            barWidth: barWidth,
            markPoint: {
              symbol: 'circle',
              itemStyle: {
                normal: {
                  color: 'rgb(78, 241, 246)',
                  shadowColor: 'rgb(78, 241, 246)',
                  shadowBlur: 20
                }
              },
              symbolSize: [10, 10], // 容器大小
              symbolOffset: [0, 0], // 位置偏移
              data: dataCoord,
            },
            data: this.yData1
          }
        ]
      };
      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.sn-container {
  .chartsdom {
    width: 100%;
    height: 95%;
  }
}
</style>
